<template>
  <div class="container">
    <topTitle
      :titleText="titleText"
      :back="back"
      @gobackTriser="goBack"
    ></topTitle>
    <div class="mainCon" v-if="detail">
      <div class="topContainer">
        <el-row>
          <el-col :xl="11" :lg="11" :md="11" :sm="24">
            <div class="leftPart">
              <h2 class="projectName pb16">{{ detail.projectName }}</h2>
              <p class="pb16">
                共{{ detail.quesDtoList.length }}个问题，已整改<span
                  class="greenColor"
                  >{{ detail.done }}个</span
                >，剩余<span class="redColor"
                  >{{ detail.quesDtoList.length - detail.done }}个</span
                ><span style="padding-left: 20px"
                  >整改截止时间：{{ detail.rectifyDate | formatYMD }}</span
                >
              </p>
            </div>
          </el-col>
          <el-col :xl="13" :lg="13" :md="13" :sm="24">
            <div class="rightPart">
              <p class="pb16">整改状态：{{ detail.statusStr }}</p>
              <p class="pb16">
                最新更新时间：{{ detail.updateTime | formatFUll }}
              </p>
              <steps :phase="phase" :statusList="statusList" />
            </div>
          </el-col>
        </el-row>
      </div>
      <div class="line"></div>
      <div class="bottomContainer">
        <div class="model">
          <p class="title">用工问题</p>
          <div class="paddingBox">
            <el-table
              :data="detail.quesDtoList"
              v-loading="loading"
              :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
              highlight-current-row
              style="border: 1px solid #dfe6ec"
            >
              <el-table-column prop="reason" label="问题项"></el-table-column>
              <el-table-column prop="tipStr" label="整改建议">
                <template slot-scope="scope">
                  <div v-html="scope.row.tipStr"></div>
                </template>
              </el-table-column>
              <el-table-column
                prop="method"
                label="整改跟进方式"
                min-width="160px"
              ></el-table-column>
              <el-table-column prop="statusStr" label="整改状态">
                <template slot-scope="scope">
                  <div class="status">
                    <span
                      :class="[
                        'dot',
                        scope.row.status === 'WAIT' ? 'wait' : 'success',
                      ]"
                    ></span
                    >{{ scope.row.statusStr }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="updateTime" label="整改完成日期">
                <template slot-scope="scope">
                  <div>
                    <span
                      v-text="
                        scope.row.status === 'WAIT'
                          ? '--'
                          : scope.row.updateTime
                      "
                    ></span>
                  </div>
                </template>
              </el-table-column>

              <!-- 表格数据为空时，页面显示   -->
              <div slot="empty" v-show="isShow">
                <emptyTable emptyText="暂无相关数据"></emptyTable>
              </div>
            </el-table>
          </div>
        </div>

        <div class="model">
          <p class="title">建议书</p>
          <div class="loadBtn">
            <div class="btnBox">
              <el-button
                class="commonBut saveBtn funComBut"
                @click="showFileFlag = !showFileFlag"
              >
                下载建议书<i
                  class="el-icon--right"
                  :class="[
                    showFileFlag ? 'el-icon-caret-top' : 'el-icon-caret-bottom',
                  ]"
                ></i
              ></el-button>
              <ul v-if="showFileFlag">
                <li @click="singlePdf(true)">导出为PDF</li>
                <li @click="singlePdf(false)">导出为word</li>
              </ul>
            </div>
          </div>
          <p class="subTitle">创建日期：{{ detail.createTime | formatYMD }}</p>
          <div class="suggestBook">
            <div class="grayBg">
              <!--
                  <div class="statusBtn hasRead">企业已查看</div>
                  <div class="statusBtn noRead">企业未查看</div>
                  -->
            </div>
            <div class="previewContainer">
              <div class="previewContent">
                <p class="ctTtile">劳动保障监察建议书</p>
                <p class="ctUscc">
                  {{
                    detail.unit
                  }}人社监建<span>[&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;]</span>号
                </p>
                <span class="underLine">{{ detail.mainName }}:</span>
                <div class="content">
                  <div class="pt24">
                    经调查，你单位在<span class="underLine">{{
                      detail.projectName
                    }}</span
                    >劳动用工中存在以下问题：<br />
                    <div
                      v-for="(item, index) in detail.quesDtoList"
                      :key="'show-' + item.indexId"
                    >
                      <span class="underLine">
                        {{ index + 1 }}、{{ item.reason }}
                      </span>
                      <br />
                    </div>
                  </div>
                  <div class="pt24">
                    为规范你单位的劳动用工行为，降低用工风险，保证劳动者合法权益，现提出以下建议：<br />
                    <div
                      v-for="(item, index) in detail.quesDtoList"
                      :key="'tip-' + item.indexId"
                    >
                      <div
                        class="underLine suggest"
                        v-html="index + 1 + '、' + item.tipStr"
                      ></div>
                    </div>
                  </div>
                  <p class="pt24">
                    请你单位及时整改，并将整改情况于<span class="underLine">{{
                      detail.rectifyDate | formatYMD
                    }}</span
                    >前报我局。
                  </p>
                </div>
              </div>
            </div>
            <div class="grayBg"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import common from '../../kits/common'
import topTitle from '@/components/publicCom/topTitle'
import emptyTable from '@/components/publicCom/emptyTable'
import steps from '@/components/publicCom/steps'

export default {
  name: 'qyDetailProposal',
  components: {
    topTitle,
    emptyTable,
    steps,
  },
  data() {
    return {
      detail: {},
      id: '',
      titleText: '返回列表',
      back: true,
      loading: false, // 保存loading
      isShow: false,
      statusList: ['待企业整改', '企业整改中', '整改完成'],
      tableList: [
        {
          problem: '项目未设立劳资专管员',
          suggest: '我是整改建议建议建议',
          style: '问题源处理后，系统自动更新状态',
          status: '待整改',
          date: '2020-05-10',
        },
        {
          problem: '项目未设立劳资专管员',
          suggest: '我是整改建议建议建议',
          style: '问题源处理后，系统自动更新状态',
          status: '已整改',
          date: '2020-06-10',
        },
      ],
      phase: 0,
      showFileFlag: false, //显示下载类型
    }
  },
  filterField: {
    formatYMD(val) {
      let dt = new Date(val)
      return (
        dt.getFullYear() +
        '年' +
        (dt.getMonth() + 1) +
        '月' +
        dt.getDate() +
        '日'
      )
    },
    formatFUll(val) {
      let dt = new Date(val)
      return (
        dt.getFullYear() +
        '年' +
        (dt.getMonth() + 1) +
        '月' +
        dt.getDate() +
        '日' +
        dt.getHours() +
        ':' +
        dt.getMinutes() +
        ':' +
        dt.getSeconds()
      )
    },
  },
  created: function () {
    this.id = this.$route.query.id
    this.getDetail()
  },
  methods: {
    // pdf true or false
    singlePdf(pdf) {
      this.showFileFlag = false
      const loading = this.$loading({
        lock: true, //lock的修改符--默认是false
        text: '', //显示在加载图标下方的加载文案
        spinner: 'el-icon-loading', //自定义加载图标类名
        background: 'rgba(0, 0, 0, 0.7)', //遮罩层颜色
        target: document.querySelector('body'), //loadin覆盖的dom元素节点
      })
      this.axios({
        method: 'post',
        url: 'api-ps/enforce/proposal/single/pdf',
        data: {
          id: this.id,
          pdf: pdf,
        },
        responseType: 'blob',
      })
        .then((res) => {
          console.log(res)
          loading.close()
          if (res && res.data.type === 'application/json') {
            let msg = '下载出错了，请稍候重试！'
            if (res.data.msg) {
              msg = res.data.msg
            }
            this.$message({
              message: msg,
              type: 'error',
            })
            return
          }
          const content = res.data
          const blob = new Blob([content])
          let dt = new Date()
          let ymd =
            dt.getFullYear() + '.' + (dt.getMonth() + 1) + '.' + dt.getDate()
          const fileName =
            '建议书_' +
            this.detail.projectName +
            '_' +
            ymd +
            (pdf ? '.pdf' : '.docx')
          if ('download' in document.createElement('a')) {
            // 非IE下载
            const elink = document.createElement('a')
            elink.download = fileName
            elink.style.display = 'none'
            elink.href = URL.createObjectURL(blob)
            document.body.appendChild(elink)
            elink.click()
            URL.revokeObjectURL(elink.href) // 释放URL 对象
            document.body.removeChild(elink)
          } else {
            // IE10+下载
            navigator.msSaveBlob(blob, fileName)
          }
        })
        .catch((error) => {
          loading.close()
          console.log(error)
        })
    },
    getDetail() {
      this.axios({
        method: 'post',
        url: 'api-ps/enforce/proposal/detail',
        data: {
          id: this.id,
        },
      })
        .then((res) => {
          if (res && res.data) {
            this.detail = res.data.result
            let dt = new Date(this.detail.rectifyDate)
            if (this.detail.status === 'WAIT') {
              this.phase = 1
            }
            if (this.detail.status === 'DOING') {
              this.phase = 2
            }
            if (this.detail.status === 'DONE') {
              this.phase = 3
            }
            let done = 0
            this.detail.quesDtoList.forEach((it) => {
              it.tipStr = '<div class="tipBox">' + it.tipStr + '</div>'
              if (it.status === 'DONE') {
                done++
              }
            })
            this.detail.done = done
          }
        })
        .catch((error) => {
          console.log(error)
        })
    },
    goBack() {
      this.$router.push('/home/onlineLaw/qyProposal')
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: '/home/onlineLaw/qyProposal',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
  },
}
</script>
<style scoped lang="less">
.container {
  .mainCon {
    top: 198px;

    .title {
      position: relative;
      padding-left: 20px;
      font-size: 18px;
      font-weight: 500;

      &::before {
        position: absolute;
        content: '';
        width: 4px;
        height: 24px;
        left: 0;
        top: 0;
        background: #265faa;
      }

      .subTitle {
        font-size: 14px;
      }
    }

    .greenColor {
      color: #5fab2c;
    }
    .redColor {
      color: #e02020;
    }
    .pb16 {
      padding-bottom: 16px;
    }
    .pb36 {
      padding-bottom: 36px;
    }

    .topContainer {
      padding: 0 0 24px 20px;
      line-height: 14px;
      font-size: 14px;

      .leftPart {
        padding-top: 10px;
        .projectName {
          line-height: 20px;
          font-size: 20px;
        }
      }
      .rightPart {
        position: relative;
        padding: 14px 0 14px 24px;
        &::after {
          position: absolute;
          content: '';
          left: 0;
          top: 0;
          width: 1px;
          height: 100%;
          background: #d5dee7;
        }
      }
    }
    @media screen and (max-width: 1200px) {
      .rightPart {
        &::after {
          width: 0;
        }
      }
    }

    .line {
      position: relative;
      left: -24px;
      width: calc(100% + 48px);
      height: 10px;
      background: #f5f7fa;
      &::after {
        position: absolute;
        left: 0;
        top: 0;
        content: '';
        width: 100%;
        height: 2px;
        background: #e4ebf1;
      }
    }

    .bottomContainer {
      padding: 27px 0 0 0;

      .model {
        position: relative;
        font-size: 14px;
        .btn {
          position: absolute;
          right: 24px;
          top: 14px;
        }
        .loadBtn {
          position: absolute;
          right: 24px;
          top: 14px;

          .btnBox {
            position: relative;
            width: 100%;

            ul {
              width: 100%;
              position: absolute;
              top: 45px;
              max-height: 274px;
              background: #fff;
              padding: 6px 0;
              margin: 0;
              box-shadow: 0 0 8px #ddd;
              -webkit-box-sizing: border-box;
              box-sizing: border-box;
              border-radius: 4px;
              z-index: 100;
              &::after {
                position: absolute;
                content: '';
                left: 27px;
                top: -6px;
                border-width: 0 6px 6px 6px;
                border-style: solid;
                border-color: transparent transparent #fff transparent;
              }

              li {
                width: 100%;
                color: #606266;
                height: 34px;
                line-height: 34px;
                padding-left: 20px;
                -webkit-box-sizing: border-box;
                box-sizing: border-box;
                cursor: pointer;

                &:hover {
                  color: #409eff;
                  font-weight: 700;
                }
              }
            }
          }
        }
        .paddingBox {
          padding: 24px 0 36px 24px;
        }
        .paddingBox2 {
          padding: 16px 0 36px 24px;
        }

        .status {
          display: flex;
          -webkit-display: flex;
          justify-content: flex-start;
          align-items: center;

          .dot {
            display: inline-block;
            width: 14px;
            height: 14px;
            margin-right: 6px;
            border-radius: 50%;
            border-width: 3px;
            border-style: solid;

            &.wait {
              background: #e02020;
              border-color: #f8e5e5;
            }
            &.success {
              background: #01aa71;
              border-color: #e5f8f1;
            }
          }
        }
        .subTitle {
          padding: 10px 0 0 24px;
          color: #999;
        }
        .borderBox {
          position: relative;
          height: 94px;
          border: 1px solid #d5dee7;
          .leftBox {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            img {
              display: block;
              width: 94px;
              height: 94px;
            }
            .leftText {
              margin-left: 24px;
              h1 {
                padding-bottom: 6px;
                font-size: 18px;
                font-weight: 500;
              }
              p {
                color: #666;
              }
            }
          }
        }

        .suggestBook {
          display: flex;
          -webkit-display: flex;
          justify-content: space-between;
          height: 430px;
          padding: 16px 0 0 24px;
          overflow-y: auto;
          .grayBg {
            position: relative;
            width: 25%;
            height: 100%;
            background: #f5f7fb;
            .statusBtn {
              position: absolute;
              left: 0;
              top: 0;
              padding: 2px 4px;
              color: #fff;
              font-size: 12px;
              &.hasRead {
                background: #20990c;
              }
              &.noRead {
                background: #e02020;
              }
            }
          }
          .previewContainer {
            width: 50%;
            height: 100%;
            overflow-y: auto;
            color: #333;
            font-size: 12px;
            line-height: 21px;

            .previewContent {
              padding: 36px 32px;

              .underLine {
                border-bottom: 1px solid #666;
              }

              .pt24 {
                padding-top: 24px;
              }

              .ctTtile {
                line-height: 18px;
                font-size: 18px;
                text-align: center;
              }

              .ctUscc {
                margin-top: 24px;
                text-align: right;
                font-size: 10px;

                .explain {
                  text-decoration: underline;
                }
              }

              .content {
                padding: 0 0 10px 20px;

                .ctClub {
                  padding-top: 110px;
                  text-align: right;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
<style lang="less">
.suggest {
  display: flex;
  -webkit-display: flex;
  justify-content: flex-start;
  .tipBox {
    p {
      span {
        font-size: 12px !important;
        line-height: 21px;
      }
    }
  }
}
</style>
